<template>
  <div id="category">
    <headers>
      <div slot="conter">分类</div>
    </headers>

    <div class="category-box">
      <category-position
        :potionList="positionList"
        @clickcategory="clickCategory"
      ></category-position>

      <category-goods
        :goods="goodsList"
        :recommend="recommendGoods"
      ></category-goods>
    </div>
  </div>
</template>

<script>
import Headers from '../../components/content/Headers'
import CategoryPosition from './child/CategoryPotion'
import CategoryGoods from './child/CategoryGoods'

import {
  getCategory,
  getCategoryGoodsList,
  getCategoryDetail
} from '../../network/getData'

export default {
  data() {
    return {
      positionList: [], // 左侧选项数组
      positionId: [], // 左侧选项的ID
      goodsList: [], // 商品列表
      recommendGoods: {
        pop: [],
        new: [],
        sell: []
      },
      currentIndex: 0
    }
  },
  components: {
    Headers,
    CategoryPosition,
    CategoryGoods

    // CategoryScroll
  },
  created() {
    this._getCategory()
  },
  methods: {
    // 获取左侧选项数据
    _getCategory() {
      getCategory().then((res) => {
        this.positionList = res.data.category.list
      })
    },
    // 获取商品列表
    _getCategoryGoodsList(index) {
      getCategoryGoodsList(this.positionList[index].maitKey).then((res) => {
        this.goodsList = res.data.list
      })
      this._getCategoryDetail('pop')
      this._getCategoryDetail('new')
      this._getCategoryDetail('sell')
    },
    // 获取推荐
    _getCategoryDetail(type) {
      const id = this.positionList[this.currentIndex].miniWallkey
      getCategoryDetail(id, type).then((res) => {
        this.recommendGoods[type] = res
      })
    },
    clickCategory(index) {
      this.currentIndex = index
      this._getCategoryGoodsList(index)
    }
  },
  watch: {
    positionList() {
      this._getCategoryGoodsList(0)
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 100%;
}

#category {
  height: 100vh;
  overflow: hidden;

  .category-box {
    display: flex;
    height: calc(100% - 95px);
  }
}

.title {
  font-size: 14px;
}
</style>
